<template>
  <el-dialog :visible="pandianDialogVisible" @close="close">
    <el-tree
      ref="tree"
      :data="data"
      show-checkbox
      node-key="id"
      highlight-current
      :load="loadNode"
      lazy
      :props="defaultProps"
      @check="onCheck"
    />
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="getCheckedKeys">确 定</el-button>
      <el-button @click="close">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>

export default {
  props: {
    pandianDialogVisible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      data: [{
        id: 1,
        name: '一级 1',
        children: [{
          id: 4,
          name: '二级 1-1',
          children: [{
            id: 9,
            name: '三级 1-1-1'
          }, {
            id: 10,
            name: '三级 1-1-2'
          }]
        }]
      }, {
        id: 2,
        name: '一级 2',
        children: [{
          id: 5,
          name: '二级 2-1',
          children: [{
            id: 11,
            name: '三级 2-1-1'
          }, {
            id: 12,
            name: '三级 2-1-2'
          }]
        }, {
          id: 6,
          name: '二级 2-2',
          children: [{
            id: 13,
            name: '三级 2-2-1'
          }, {
            id: 14,
            name: '三级 2-2-2'
          }]
        }]
      }, {
        id: 3,
        name: '一级 3',
        children: [{
          id: 7,
          name: '二级 3-1',
          children: [{
            id: 15,
            name: '三级 3-1-1'
          }, {
            id: 16,
            name: '三级 3-1-2'
          }]
        }, {
          id: 8,
          name: '二级 3-2',
          children: [{
            id: 17,
            name: '三级 3-2-1'
          }, {
            id: 18,
            name: '三级 3-2-2'
          }]
        }]
      }],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      formOption: {}
    }
  },
  methods: {
    close() {
      this.pandianDialogVisible = false
      this.$emit('update:pandianDialogVisible', false)
    },
    async getCheckedKeys() {
      console.log(this.$refs.tree.getCheckedNodes())
      // await addUserList(this.$refs.tree.getCheckedNodes())
    },
    /*    enableCheckboxOnExpand(node) {
      // 对于动态加载的树节点，当节点展开时，确保所有子节点加载完成并可勾选。
      // 如果数据不是懒加载的，这一步可能不是必须的，因为展开的节点默认就是可勾选的。
      if (node.children && node.children.length > 0) {
        node.children.forEach(child => {
          child.disabled = false // 确保子节点可勾选
          if (child.children && child.children.length > 0) {
            // 如果还有下一层，递归处理
            this.enableCheckboxOnExpand(child)
          }
        })
      }
    },*/
    onCheck(nodeData, treeChecked) {
      const node = this.$refs.tree.getNode(nodeData.id)
      debugger
      // 如果被检查的节点是一级节点（level 为 1）
      if (nodeData.level === 1) {
        // 获取所有根节点
        const rootNodes = this.$refs.tree.store.root.childNodes

        // 遍历所有根节点的子节点（即一级节点）
        rootNodes.forEach(rootNode => {
          // 遍历每个一级节点的子节点（如果有的话）
          rootNode.childNodes.forEach(childNode => {
            // 如果当前被检查的节点不是当前遍历到的节点，并且当前遍历到的节点是已选中的
            // 则取消其选中状态
            if (childNode.data !== nodeData && childNode.checked) {
              this.$refs.tree.setChecked(childNode.data.id, false, false)
            }
          })
        })

        // 如果需要，展开被选中的一级节点（您之前的逻辑）
        if (treeChecked && !nodeData.expanded && !nodeData.isLeaf) {
          this.$refs.tree.getNode(nodeData.id).expand()
        }
      }
      // 获取所有一级节点的 id 数组
      const levelOneIds = this.data.map(item => item.id)

      // 检查当前被点击的节点是否是一级节点
      if (levelOneIds.includes(nodeData.id)) {
        // 如果是一级节点
        if (treeChecked) { // 节点被选中
          // 取消其他一级节点的选中状态
          levelOneIds.forEach(id => {
            if (id !== nodeData.id) { // 排除当前被选中的节点
              this.$refs.tree.setChecked(id, false, false) // 第二个参数为false表示不影响子节点
            }
          })
        }
      }

      // 展开选中的未展开的非叶子节点
      if (node.checked && !node.expanded && !node.isLeaf) {
        node.expand(function() {
          for (let i = 0; i < node.childNodes.length; i++) {
            node.childNodes[i].expand()
          }
        })
      }
    },

    loadNode(node, resolve) {
      if (node.level === 0) {
        return resolve(this.data)
      }
      setTimeout(() => {
        let data = []
        if (node.level === 1) {
          data = node.data.children
        }
        if (node.level === 2) {
          data = node.data.children
        }
        console.log(data)
        resolve(data)
      }, 0)
    }
  }
}

</script>

<style >

</style>
